<template>
  <div class="query">
    <h1 class="title">查询户室信息</h1>
    <p class="subTitle">帮你快速查询户室信息</p>
    <div class="wrapper-search">
      <img
        src="../assets/组 11@2x.png"
        alt=""
        style="width: 12.7rem; height: 12rem; margin-top: 3.0rem;"
      />
      <p style="color: #333; font-size: 1.125rem; font-weight: bold;">
        暂无数据
      </p>

      <div class="btn" style="margin-top: 0.34375rem;">
        <button
          type="button"
          style="background: #fff; border: 1px solid #000;"
          @click="close"
        >
          返回
        </button>
        <button type="button" @click="back">
          再次查询
        </button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    search() {
      // 流程1: 查询成功 直接显示二维码
      this.$router.push({
        path: "/qrcode"
      });

      // 流程2: 查询失败
    },
    back() {
      this.$router.go(-1);
    },
    close() {
      WeixinJSBridge.call("closeWindow");
    }
  }
};
</script>
<style lang="scss" scoped>
.query {
  height: 100%;
  background-image: linear-gradient(#205fff, #52b3ff);
  overflow: hidden;
  text-align: center;
}
.title {
  margin: 0 auto;
  margin: 0;
  margin-top: 2.53125rem;
  padding: 0;
  color: #fff;
  font-size: 3.5rem;
}
.subTitle {
  margin: 0;
  padding: 0;
  color: #fff;
  letter-spacing: 0.2rem;
  font-size: 1.875rem;
}
.wrapper-search {
  width: 20.625rem;
  height: 22.525rem;
  background: #fff;
  border-radius: 1.15625rem;
  margin: 0 auto;
  margin-top: 1.59375rem;
  overflow: hidden;
  padding: 0 1rem;
  box-sizing: border-box;
}

.btn {
  display: flex;
  justify-content: space-around;
}
.btn button {
  width: 8.34375rem;
  background: #f4d554;
  outline: none;
  border: none;
  height: 2.8125rem;
  border-radius: 1.4rem;
  color: #333;
  font-weight: bold;
  font-size: 1.125rem;
}
</style>
